<!-- 扶贫商品 -->
<template>
    <div class="information">
        <el-card>
            <el-button type="primary" icon="Plus" @click="addCommodity">新增商品信息</el-button>
            <!-- 表格 -->
            <div class="table">
                <el-table ref="multipleTableRef" :data="formattedPrices" style="width: 100%;" max-height="460px">
                    <el-table-column label="序号" type="index" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="productImg" label="商品图片" width="150px">
                        <template #default="scope">
                            <img :src="scope.row.productImg" alt="" style="width: 80px;height:60px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="商品名称" width="150px" show-overflow-tooltip />
                    <el-table-column prop="description" label="商品描述" width="250px" show-overflow-tooltip />
                    <el-table-column prop="price" label="价格" width="150px" align="center"></el-table-column>
                    <el-table-column prop="stock" label="库存"></el-table-column>
                    <el-table-column prop="saleNum" label="销量"></el-table-column>
                    <el-table-column label="操作" align="center" width="150px">
                        <template #default="scope">
                            <el-button size="small" type="primary" icon="Edit" @click="handleEdit(scope.row)"></el-button>
                            <el-popconfirm title="您确定删除这条商品信息吗?" @confirm="handleDelete(scope.row)" icon="Delete"
                                icon-color="red" width="220px">
                                <template #reference>
                                    <el-button size="small" type="danger" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <!-- 分页器 -->
                <Pagination :paginationData="paginationData" @getInfo="getCommodityInfo"></Pagination>
            </div>
        </el-card>
    </div>
    <!-- 新增 编辑对话框 -->
    <OperateDialog :paginationData="paginationData" @operateCommodityInfo="operateCommodityInfo"></OperateDialog>
</template>

<script setup lang="ts">
import Pagination from '../../components/pagination/index.vue'
import OperateDialog from './operate_dialog/index.vue'
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
// 引入全局事件总线
import $bus from '../../bus/index'
import { reqDeleteCommodityInfo, reqGetCommodityInfo, reqOperateCommodityInfo } from '../../api/info/commodity/index'
import { Commodity, CommodityFormData, AllCommodity } from '../../api/info/commodity/type';

// 表格数据
let tableData = ref<AllCommodity>([])
// 存储接口返回的分页器数据
let paginationData = ref({})

onMounted(() => {
    getCommodityInfo()
})
// 计算属性用于格式化价格
const formattedPrices = computed(() => {
    return tableData.value.map((item: { price: number; }) => ({
        ...item,
        price: item.price.toFixed(2)

    }))
})


//获取全部 商品 信息
const getCommodityInfo = async (currentpage = 1, pagesize = 10) => {
    let data: CommodityFormData = {
        pageSize: pagesize,
        currentPage: currentpage
    }

    let result: any = await reqGetCommodityInfo(data)
    if (result.code == 20000) {
        tableData.value = result.data.list

        paginationData.value = result.data
    }
}

// 新增 商品 按钮
const addCommodity = () => {
    $bus.emit('showDialog', {
        isShow: true
    })
}


// 编辑表格中的数据
const handleEdit = (row: Commodity) => {
    $bus.emit('showDialog', {
        isShow: true,
        row: row
    })

}
// 气泡确认框 确认按钮回调 删除
const handleDelete = async (row: Commodity) => {
    let result: any = await reqDeleteCommodityInfo(row)
    if (result.code == 20000) {
        // 重新获取 商品 信息
        getCommodityInfo(tableData.value.length > 1 ? paginationData.value.currentPage : paginationData.value.currentPage - 1)
        ElMessage({
            type: 'success',
            message: '扶贫商品删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '扶贫商品删除失败'
        })
    }

}
// 新增 编辑商品信息的回调
const operateCommodityInfo = async (CommodityForm: Commodity) => {
    let result: any = await reqOperateCommodityInfo(CommodityForm)
    if (result.code == 20000) {
        ElMessage({
            type: 'success',
            message: CommodityForm.id ? '扶贫商品修改成功' : '扶贫商品新增成功'
        })
        // 再次发请求获取最新的数据
        // getCommodityInfo(CommodityForm.id ? paginationData.value.currentPage : 1)
        getCommodityInfo(paginationData.value.currentPage)
    } else {
        ElMessage({
            type: 'error',
            message: CommodityForm.id ? '扶贫商品修改失败' : '扶贫商品新增失败'
        })
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}

.table {
    margin: 10px 0;

    .el-table {
        font-size: 13px !important;
    }
}

.pagination {
    margin-top: 20px;
}
</style>